import React from 'react';
import { Modal, Form, Input } from 'antd';
import { baseLoginParamType } from './index'
import { register } from '@/requests'
import './index.less'

interface baseRegisterModalProps {
  isModalOpen: boolean;
  setIsModalOpen: (flag: boolean) => void;
}

interface registerParamsProps extends baseLoginParamType {
  confirmPassword: string;
}

const RegisterModal: React.FC<baseRegisterModalProps> = ({
  isModalOpen,
  setIsModalOpen
}) => {
  const [form] = Form.useForm();

  const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 16 },
  };

  const handleOnOk = (type: string) => {
    if (type === "onOk") {
      form.validateFields().then((values: registerParamsProps) => {
        register({
          ...values,
          TXCODE: "register"
        }).then((res: any) => {
          console.log(res);
          setIsModalOpen(false)
        })
      })
    } else {
      setIsModalOpen(false)
    }
  }

  return (
    <Modal
      title="注册新用户"
      width={600}
      visible={isModalOpen}
      onOk={() => handleOnOk("onOk")}
      onCancel={() => handleOnOk('onClose')}
    >
      <Form {...layout} form={form} className='register-box'>
        <Form.Item
          name="username"
          label="用户名"
          rules={[{ required: true, message: "请输入用户名" }]}
        >
          <Input placeholder={"用户名"} type="text" id={"username"} className="inputheight" />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[{ required: true, message: "请输入密码" }]}
        >
          <Input placeholder={"密码"} type="password" id={"password"} className="inputheight" />
        </Form.Item>
        <Form.Item
          name="confirmPassword"
          label="确认密码"
          rules={[
            { required: true, message: "请确认密码" },
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve(value)
                }
                return Promise.reject("两次密码输入不一致")
              }
            })
          ]}
        >
          <Input placeholder={"确认密码"} type="password" id={"password"} className="inputheight" />
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default RegisterModal;